<template>
  <a-row v-if="addressList.length > 0" type="flex" align="middle">
    <a-select
      :defaultValue="value.province_id ? value.province_id - 0 : '选择省'"
      :value="value.province_id ? value.province_id - 0 : '选择省'"
      style="width: 30%; margin-right: 10px"
      @change="(e) => handleProvinceChange(e, 'province')"
    >
      <a-select-option v-for="province in addressList" :key="province.id - 0">
        {{ province.name }}
      </a-select-option>
    </a-select>
    <a-select
      :defaultValue="value.city_id ? value.city_id - 0 : '选择市'"
      :value="value.city_id ? value.city_id - 0 : '选择市'"
      style="width: 30%; margin-right: 10px"
      @change="(e) => handleProvinceChange(e, 'city')"
      v-if="showNum > 1"
    >
      <a-select-option v-for="city in addressList[provinceIndex].cityAll" :key="city.id - 0">
        {{ city.name }}
      </a-select-option>
    </a-select>
    <a-select
      :defaultValue="value.district_id ? value.district_id - 0 : '选择区县'"
      :value="value.district_id ? value.district_id - 0 : '选择区县'"
      style="width: 30%"
      @change="(e) => handleProvinceChange(e, 'district')"
      v-if="showNum > 2"
    >
      <a-select-option
        v-for="district in addressList[provinceIndex].cityAll[cityIndex].districtAll"
        :key="district.id - 0"
      >
        {{ district.name }}
      </a-select-option>
    </a-select>
  </a-row>
</template>

<script>
import { address } from '@/api/components/address'

export default {
  name: 'SetAddress',
  components: {},
  data() {
    return {
      addressList: [],
      provinceIndex: 0,
      cityIndex: 0,
    }
  },
  props: {
    value: {
      type: Object,
      default: (e) => {
        return {}
      },
    },
    showNum: {
      type: Number,
      default: 3,
    },
  },
  created() {
    this.getList()
  },
  watch: {
    value: {
      deep: true,
      handler(newVal, oldVal) {
        this.initData(newVal)
      },
    },
  },
  methods: {
    getList() {
      address().then((res) => {
        this.addressList = res.data.list
        this.initData(this.value)
      })
    },
    // 初始化数据
    initData(value) {
      if (value.province_id > 0 && this.addressList.length > 0) {
        this.addressList.forEach((province, index1) => {
          if (province.id - 0 === value.province_id - 0) {
            this.provinceIndex = index1
            if (value.city_id > 0) {
              this.addressList[index1].cityAll.forEach((city, index2) => {
                if (city.id - 0 === value.city_id - 0) {
                  this.cityIndex = index2
                }
              })
            } else {
              this.cityIndex = 0
            }
          }
        })
      } else {
        this.provinceIndex = 0
        this.cityIndex = 0
      }
    },
    handleProvinceChange(e, type) {
      var _self = this
      var value = this.value
      var provinceInd = 0,
        cityInd = 0,
        districtInd = 0
      if (type === 'province') {
        provinceInd = _self.addressList.findIndex((val) => {
          return e == val.id
        })
        value = {
          province_id: e,
          city_id: 0,
          district_id: 0,
          province: _self.addressList[provinceInd].name,
          city: '',
          district: '',
        }
      } else if (type === 'city') {
        provinceInd = _self.addressList.findIndex((val) => {
          return value.province_id == val.id
        })
        cityInd = _self.addressList[provinceInd].cityAll.findIndex((val) => {
          return e == val.id
        })
        value = {
          province_id: value.province_id,
          city_id: e,
          district_id: 0,
          province: _self.addressList[provinceInd].name,
          city: _self.addressList[provinceInd].cityAll[cityInd].name,
          district: '',
        }
      } else if (type === 'district') {
        provinceInd = _self.addressList.findIndex((val) => {
          return value.province_id == val.id
        })
        cityInd = _self.addressList[provinceInd].cityAll.findIndex((val) => {
          return value.city_id == val.id
        })
        districtInd = _self.addressList[provinceInd].cityAll[cityInd].districtAll.findIndex((val) => {
          return e == val.id
        })
        value = {
          province_id: value.province_id,
          city_id: value.city_id,
          district_id: e,
          province: _self.addressList[provinceInd].name,
          city: _self.addressList[provinceInd].cityAll[cityInd].name,
          district: _self.addressList[provinceInd].cityAll[cityInd].districtAll[districtInd].name,
        }
      }
      console.log(value,222)
      this.$emit('input', value)
    },
  },
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.title-but {
  margin-left: 6px;
}
</style>
